<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./CSS/reset.css">
  <style>
    /* 某一块单独想设置的css */
    /* 每一行热搜上有间隙 */
    ul>li{
      /* margin有上下折叠 */
      /* 上下都有30px，但是并不会为60 */
      margin:18px 0；;
    }
ul>li>a{
  display:inline-block;
}
    /* 当我们的手指放上去有个颜色  */
      /* 局部 */
ul>li>a:hover{
  color:#f00;
}
 
ul>li .ranking{
display:inline-block;
width:24px;
height:24px;
  /* 数字居右边的边距 */
margin-right:3px;
  /* 文本水平居中 */
text-align:center;
  /* 文字居中 */
line-height:24px;

font-weight:700;
color:#999;
}
ul>li .content{
  display:inline;
}
.icon {
position: relative;
top:6px;
left:4px;

display:inline-block;
width:32px;
height:32px;
background-image:url(../images/new.png);
}

  </style>
</head>
<body>
  <!-- 无序列表 -->
  <ul>
    <li class="item">
      <!-- 不推荐行内非替换元素嵌套块级元素 -->
      <a href="#">
        <span class="ranking">1</span>
        <!-- div独占一行，希望1和div的内容在一行显示 -->
        <div class="content">
            原图风景壁纸海边的风景总是很治愈
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <!-- 不推荐行内非替换元素嵌套块级元素 -->
      <a href="#">
        <span class="ranking">2</span>
        <!-- div独占一行，希望1和div的内容在一行显示 -->
        <div class="content">
            原图风景壁纸海边的风景总是很治愈
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <!-- 不推荐行内非替换元素嵌套块级元素 -->
      <a href="#">
        <span class="ranking">3</span>
        <!-- div独占一行，希望1和div的内容在一行显示 -->
        <div class="content">
            原图风景壁纸海边的风景总是很治愈
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <!-- 不推荐行内非替换元素嵌套块级元素 -->
      <a href="#">
        <span class="ranking">4</span>
        <!-- div独占一行，希望1和div的内容在一行显示 -->
        <div class="content">
            原图风景壁纸海边的风景总是很治愈
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <!-- 不推荐行内非替换元素嵌套块级元素 -->
      <a href="#">
        <span class="ranking">5</span>
        <!-- div独占一行，希望1和div的内容在一行显示 -->
        <div class="content">
            原图风景壁纸海边的风景总是很治愈
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <!-- 不推荐行内非替换元素嵌套块级元素 -->
      <a href="#">
        <span class="ranking">6</span>
        <!-- div独占一行，希望1和div的内容在一行显示 -->
        <div class="content">
            原图风景壁纸海边的风景总是很治愈
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <!-- 不推荐行内非替换元素嵌套块级元素 -->
      <a href="#">
        <span class="ranking">7</span>
        <!-- div独占一行，希望1和div的内容在一行显示 -->
        <div class="content">
            原图风景壁纸海边的风景总是很治愈
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <!-- 不推荐行内非替换元素嵌套块级元素 -->
      <a href="#">
        <span class="ranking">8</span>
        <!-- div独占一行，希望1和div的内容在一行显示 -->
        <div class="content">
            原图风景壁纸海边的风景总是很治愈
        </div>
        <i class="icon"></i>
      </a>
      <li class="item">
        <!-- 不推荐行内非替换元素嵌套块级元素 -->
        <a href="#">
          <span class="ranking">9</span>
          <!-- div独占一行，希望1和div的内容在一行显示 -->
          <div class="content">
              原图风景壁纸海边的风景总是很治愈
          </div>
          <i class="icon"></i>
        </a>
      </li>
    </li>
    <li class="item">
      <!-- 不推荐行内非替换元素嵌套块级元素 -->
      <a href="#">
        <span class="ranking">10</span>
        <!-- div独占一行，希望1和div的内容在一行显示 -->
        <div class="content">
            原图风景壁纸海边的风景总是很治愈
        </div>
        <i class="icon"></i>
      </a>
    </li>
  </ul>
</body>
</html>